<!--
叠放次序：3D中xyz的z轴
    z-index: 数值 | auto | inherit;
        - 可取负数（在父元素平面下面）、0、正数，默认auto
        - 不要带单位
        - 值越大浮得越高

所有元素都是以父元素为基准平面的
而浮动的元素，可能会重叠，因此需要设置谁压着谁
    浮
        float
        relative    // 相对定位：占位、浮动，但属于不脱标
        absolute
        fixed
    不浮
        标准块元素
        static
        sticky
注意：
    1）只有定位（position）才有z-index属性，
       浮动（float）、标准流块元素，是没有z-index属性的
    2）浮动（float）嵌套时，都是【子压着父】：子在上，父在下
-->
<style>
    body {
        margin: 0;
    }
    /* 浮动（float） */
    .grandfather {
        float: left;
        /* 无效 */
        /* z-index: 5; */
        width: 300px;
        height: 100px;
        background: cyan;
    }
    .father {
        float: left;
        width: 100px;
        height: 300px;
        background: skyblue;
    }
    .son {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
    }
    /* 定位（position） */
    .other {
        position: fixed;
        z-index: 0;
        width: 250px;
        height: 250px;
        background-color: gray;
    }
</style>

<!-- 浮动（float） -->
<div class="grandfather">浮动元素：爷爷
    <div class="father">浮动元素：父亲
        <div class="son">浮动元素：孩子</div>
    </div>
</div>
<!-- 定位（position） -->
<div class="other">定位元素：他人</div>